<template>
	<u-popup v-model="navBarShow" mode="top" :mask="false" z-index="1002" style="height:176rpx" :mask-custom-style="{'display':'none'}">
		<u-navbar back-text="" :title="bookName" :background="{'background': readTheme.mainBackground}" :border-bottom="false">
			<view class="slot-wrap">
				<text @click="handleAddBookShelf">{{isInShelf?'撤出书架':'加入书架'}}</text>
			</view>
		</u-navbar>
	</u-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			navBarShow: {
				type: Boolean,
				default: false
			},
			bookName: {
				type: String
			},
			isInShelf: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			...mapGetters({
				readTheme: 'readTheme'
			})
		},
		methods: {
			handleAddBookShelf() {
				this.$emit('handleAddBookShelf')
			}
		}
	}
</script>

<style scoped>
	.slot-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		padding: 0 20px;

	}
</style>
